<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-itab</title>
<style type="text/css">
*
    {
    margin:0;
    padding:0;
    }

html,
body
    {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    height:100%;
    overflow:hidden;
    }

body,body *
    {
    font-family : "Arial","宋体";
    font-size: 9pt;
    }

body
    {
    border:0;
    background:#f9f9f9;
    }

img
    {
    border:0;
    vertical-align:middle;
    }

table
    {
    table-layout:fixed;
    border-collapse:collapse;
    }
div
    {
    outline:0;
    }

.itab
    {
    border:0;
    }
    .itab .bar
        {
        list-style:none;
        margin:0 auto;
        text-align:center;
        height:27px;
        width:100%;
        background:#4d6366;
        }
        .itab .bar .item
            {
            float:left;
            line-height:27px;
            height:27px;
            }
        .itab .bar .actleft
            {
            float:left;
            width:15px;
            height:27px;
            background:url("../skin/selected-tab-left.png") no-repeat;
            }
        .itab .bar .actright-tableft
            {
            float:left;
            width:15px;
            height:27px;
            background:url("../skin/selected-tab-right-tab-left.png") no-repeat;
            }
        .itab .bar .actright-hoverleft
            {
            float:left;
            width:15px;
            height:27px;
            background:url("../skin/selected-tab-right-hover-tab-left.png") no-repeat;
            }
        .itab .bar .tabright-hoverleft
            {
            float:left;
            width:15px;
            height:27px;
            background:url("../skin/tab-right-hover-tab-left.png") no-repeat;
            }
        .itab .bar .tabright-tableft
            {
            float:left;
            width:15px;
            height:27px;
            background:url("../skin/tab-right-tab-left.png") no-repeat;
            }
        .itab .bar .tabright
            {
            float:left;
            width:15px;
            height:27px;
            background:url("../skin/tab-right.png") no-repeat;
            }
        .itab .bar .rtl
            {
            float:right;
            margin:0 5px 0 0;
            }
            .itab .bar .item a.act,
            .itab .bar .item a.pnd
                {
                float:left;
                outline:0;
                text-decoration:none;
                }
                .itab .bar .item a.pnd .cap,
                .itab .bar .item a.act .cap
                    {
                    display:block;
                    float:left;
                    height:27px;
                    background:url("../skin/tab-middle.png") repeat-x;
                    }
                .itab .bar .item a.act .cap
                    {
                    background:url("../skin/selected-tab-middle.png") repeat-x;
                    border-bottom:0;
                    cursor:default;
                    }
                    .itab .bar .item a.act .cap .ico,
                    .itab .bar .item a.pnd .cap .ico
                        {
                        float:left;
                        margin:4px 3px;
                        }
                    .itab .bar .item a.pnd .cap .ico
                        {
                        margin:3px;
                        }
                    .itab .bar .item a.act .cap .txt,
                    .itab .bar .item a.pnd .cap .txt
                        {
                        float:left;
                        margin:3px 4px;
                        color:#801204;
                        border-bottom:3px double #801204;
                        line-height:16px;
                        }
                    .itab .bar .item a.pnd .cap .txt
                        {
                        margin:2px 4px;
                        border-bottom:1px solid blue;
                        color:blue;
                        }
                    .itab .bar .item a.act .cap .iclose,
                    .itab .bar .item a.pnd .cap .iclose
                        {
                        display:block;
                        float:left;
                        padding:0;
                        margin:4px 1px 0 8px;
                        height:16px;
                        width:16px;
                        cursor:default;
                        }
                    .itab .bar .item a.pnd .cap .iclose
                        {
                        margin:3px 1px 0 8px;
                        }

                .itab .bar .item a:hover.pnd .cap
                    {
                    background:url("../skin/hover-tab-middle.png") repeat-x;
                    }
                    .itab .bar .item a:hover.pnd .cap .txt
                        {
                        border-bottom:1px solid blue;
                        color:#801204;
                        }

    .itab .off
        {
        display:none;
        }
    .itab .on
        {
        display:block;
        }

</style>
</head>

<body>
<div class="itab">
     <dl class="bar">
        <div class="actleft"></div>
        <dd class="item"><a class="act" href="#"><div class="cap"><img src="/icos/cog.png" class="ico" alt="" /><span class="txt">系统设置</span></div></a></dd>
        <div class="actright-tableft"></div>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="/icos/user.png" class="ico" alt="" /><span class="txt">用户/顾客</span></div></a></dd>
        <div class="tabright-hoverleft"></div>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="../skin/loading.png" class="ico" alt="" /><span class="txt">产品管理</span></div></a></dd>
        <div class="tabright-tableft"></div>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="../skin/loading.gif" class="ico" alt="" /><span class="txt">店/工作室</span></div></a></dd>
        <div class="tabright-tableft"></div>
        <dd class="item"><a class="pnd" href="#"><div class="cap"><img src="/icos/cog.png" class="ico" alt="" /><span class="txt">销售/业绩</span></div></a></dd>
        <div class="tabright"></div>
        <dd class="item rtl">{{ userinfo }}</dd>
    </dl>
</div>

</body>
</html>